<template>
  <div>
    <!-- 日期选择器 -->
    <detail-data @changeDate="changeDate"></detail-data>
    <!-- 历史数据图表 -->
    <div id="container"></div>
    <!-- 警报数据表格 -->
    <bp-alarm-table @getBpDeviceHistoryLog="getBpDeviceHistoryLog"></bp-alarm-table>
  </div>
</template>

<script>
import { DualAxes } from '@antv/g2plot'
import DetailData from '../components/DetailData'
import BpAlarmTable from '@/components/BpAlarmTable'

export default {
  components: { DetailData, BpAlarmTable },
  name: 'BpHistoricalData',
  data() {
    return {
      deviceInfo: {},
      startDate: '',
      endDate: '',
      dualAxes: '',
    }
  },
  mounted() {
    this.$http.get('/v1/deviceInfo/list').then(res => {
      this.deviceInfo = res.data[0]
      this.getBpDeviceHistoryLog()
    })

    this.$bus.$on('bpDeviceHistoryLog', this.getBpDeviceHistoryLog)
  },
  methods: {
    changeDate(startDate, endDate) {
      this.startDate = startDate
      this.endDate = endDate
      this.getBpDeviceHistoryLog()
    },
    getBpDeviceHistoryLog() {
      this.$http
        .get('/v1/bpDeviceHistoryLog/list', {
          params: {
            deviceName: this.deviceInfo.deviceName,
            startDate: this.startDate,
            endDate: this.endDate,
          },
        })
        .then(res => {
          // 通过Map循环组装数据
          const data = res.data.map(item => {
            return {
              currentBpUp: item.currentBpUp, // 上压
              currentBpDown: item.currentBpDown, // 下压
              gmtCreate: item.gmtCreate.replace('T', ' '), // 时间
            }
          })
          // 图表绘制
          if (this.dualAxes) {
            this.dualAxes.changeData([data, data])
          } else {
            this.dualAxes = new DualAxes('container', {
              data: [data, data],
              xField: 'gmtCreate',
              yField: ['currentBpUp', 'currentBpDown'],
              meta: {
                currentBpUp: {
                  alias: '血压上压',
                },
                currentBpDown: {
                  alias: '血压下压',
                },
              },
              yAxis: {
                currentBpUp: {
                  min: 0,
                  max: 170,
                },
                currentBpDown: {
                  min: 0,
                  max: 170,
                },
              },
              annotations: {
                // 标注，温度阈值的标注
                currentBpUp: [
                  {
                    type: 'text',
                    position: ['min', this.deviceInfo.borderBpUpMin],
                    content: '上压低阈值 ' + this.deviceInfo.borderBpUpMin + 'mmHg',
                    offsetY: -4,
                    style: {
                      textBaseline: 'bottom',
                    },
                  },
                  {
                    type: 'line',
                    start: ['min', this.deviceInfo.borderBpUpMin],
                    end: ['max', this.deviceInfo.borderBpUpMin],
                    style: {
                      stroke: '#F4664A',
                      lineDash: [2, 2],
                    },
                  },
                  {
                    type: 'text',
                    position: ['min', this.deviceInfo.borderBpUpMax],
                    content: '上压高阈值 ' + this.deviceInfo.borderBpUpMax + 'mmHg',
                    offsetY: -4,
                    style: {
                      textBaseline: 'bottom',
                    },
                  },
                  {
                    type: 'line',
                    start: ['min', this.deviceInfo.borderBpUpMax],
                    end: ['max', this.deviceInfo.borderBpUpMax],
                    style: {
                      stroke: '#F4664A',
                      lineDash: [2, 2],
                    },
                  },
                ],
                currentBpDown: [
                  {
                    type: 'text',
                    position: ['min', this.deviceInfo.borderBpDownMin],
                    content: '下压低阈值 ' + this.deviceInfo.borderBpDownMin + 'mmHg',
                    offsetY: -4,
                    style: {
                      textBaseline: 'bottom',
                    },
                  },
                  {
                    type: 'line',
                    start: ['min', this.deviceInfo.borderBpDownMin],
                    end: ['max', this.deviceInfo.borderBpDownMin],
                    style: {
                      stroke: '#F4664A',
                      lineDash: [2, 2],
                    },
                  },
                  {
                    type: 'text',
                    position: ['min', this.deviceInfo.borderBpDownMax],
                    content: '下压高阈值 ' + this.deviceInfo.borderBpDownMax + 'mmHg',
                    offsetY: -4,
                    offsetX: 120,
                    style: {
                      textBaseline: 'bottom',
                    },
                  },
                  {
                    type: 'line',
                    start: ['min', this.deviceInfo.borderBpDownMax],
                    end: ['max', this.deviceInfo.borderBpDownMax],
                    style: {
                      stroke: '#F4664A',
                      lineDash: [2, 2],
                    },
                  },
                ],
              },
            })
            this.dualAxes.render()
          }
        })
    },
  },
}
</script>

<style scoped></style>
